<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        height: 100px;
        width: 100px;
        background-color: aliceblue;
    }

    @keyframes shake-from {
        0% {
            opacity: 0;
            transform: translateX(0);
        }

        50% {
            opacity: 0.5;
            transform: translateX(50px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes shake-to {
        0% {
            opacity: 1;
            transform: translateX(0);
        }

        50% {
            opacity: 0.5;
            transform: translateX(50px);
        }

        100% {
            opacity: 0;
            transform: translateX(0);
        }
    }

    /* 通用的动画配置是通过 v 开头，但是如果在 div 上面使用了 name 属性是可以规避掉这个的 
        将 v 替换为 lk 就可以表示生效
    */
    /* .v-enter-active {
        animation: 2s shake-from;
    }

    .v-leave-active {
        animation: 2s shake-to;
    } */


    .lk-enter-active {
        animation: 2s shake-from;
    }

    .lk-leave-active {
        animation: 2s shake-to;
    }


</style>
<!-- Vue 提供了 <Transition> 和 <TransitionGroup> 组件来处理元素进入、离开和列表顺序变化的过渡效果  -->

<body>
    <div id="app"></div>
</body>
<script src="js/vue.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: "vue动画",
                isShow: false,

            }
        },
        template: `
            <div>
                <!-- 这里增加一个 name 属性，就可以脱离通用的控制 -->
                <transition name="lk">
                    <div class="box" v-show="isShow">{{msg}}</div>
                </transition>

                <transition>
                    <div class="box" v-show="isShow">{{msg}}</div>
                </transition>

                <transition>
                    <div class="box" v-show="isShow">{{msg}}</div>
                </transition>

                <transition>
                    <div class="box" v-show="isShow">{{msg}}</div>
                </transition>

                <transition>
                    <div class="box" v-show="isShow">{{msg}}</div>
                </transition>
               
                <button @click="isShow = !isShow">显示与隐藏</button>    
            </div>
        `

    }).mount("#app");
</script>

</html>